<template>
  <!-- 商户管理资金安全 -->
  <div class="app-container">
    <!-- 操作按钮 -->
    <div class="overtable-btns">
      <el-button size="mini" type="warning" icon="el-icon-back">返回</el-button>
    </div>
    <div class="block"></div>
    <ul class="account-head">
      <li class="item" v-for="item in headDetail" :key="item.title">
        <p>{{item.title}}</p>
        <p>{{item.data}}</p>
      </li>
    </ul>
    <div class="block"></div>
    <el-form class="form-wrap" :model="form" size="small" label-width="132px">
      <el-form-item label="会员账号状态:">
        <el-switch v-model="form.enable" active-text="开启" inactive-text="禁用" @change="changeStatus"></el-switch>
      </el-form-item>
      <el-form-item label="登录密码:">
        <el-input type="password" v-model.trim="form.loginPasword" disabled />
        <el-button size="mini" type="primary" icon="el-icon-edit" @click="modifyPhone('2')">重置密码</el-button>
      </el-form-item>
      <el-form-item label="交易密码:">
        <el-input type="password" v-model.trim="form.tradePassword" disabled />
        <el-button size="mini" type="primary" icon="el-icon-edit" @click="modifyPhone('3')">重置密码</el-button>
      </el-form-item>
    </el-form>
    <div class="block"></div>
    <!--表格渲染-->
    <div>
      <div class="overtable-btns spe-btn">
        <span class="table-title">登录记录</span>
        <el-button size="mini" type="warning" icon="el-icon-download">报表导出</el-button>
      </div>
      <!-- v-loading="loading" -->
      <table-list />
    </div>
    <div class="dialog-wrap">
      <!-- 修改手机号弹窗 -->
      <el-dialog :title="titleName" :append-to-body="true" :visible.sync="visible" width="600px">
        <el-form
          v-if="pwModify"
          class="form-wrap form-dialog"
          :model="modifyTpwForm"
          size="small"
          label-width="132px"
        >
          <el-form-item label="请设置新的密码:">
            <el-input
              type="password"
              v-model.trim="modifyTpwForm.newPassword"
              placeholder="请输入（6）位数字"
            />
          </el-form-item>
          <el-form-item label="再次确认密码:">
            <el-input
              type="password"
              v-model.trim="modifyTpwForm.newPasswordAgain"
              placeholder="请输入（6）位数字"
              clearable
            />
          </el-form-item>
        </el-form>
        <el-form
          v-if="tradePwModify"
          class="form-wrap form-dialog"
          :model="modifyPwForm"
          size="small"
          label-width="132px"
        >
          <el-form-item label="请设置新的密码:">
            <el-input
              type="password"
              v-model.trim="modifyPwForm.newPassword"
              placeholder="请输入（8-16）位字母+数字"
            />
          </el-form-item>
          <el-form-item label="再次确认密码:">
            <el-input
              type="password"
              v-model.trim="modifyPwForm.newPasswordAgain"
              placeholder="请输入（8-16）位字母+数字"
              clearable
            />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button>取 消</el-button>
          <el-button type="primary">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import checkPermission from '@/utils/permission'
import initTable from '@/mixins/initTable'
import { parseTime } from '@/utils/index'
import tableList from './tableList'
export default {
  components: { tableList },
  mixins: [initTable],
  data() {
    return {
      visible: false,
      titleName: '',
      phoneModify: false,
      pwModify: false,
      tradePwModify: false,
      form: {
        enable: false,
        loginPasword: '454545415',
        tradePassword: '12121212'
      },
      headDetail: [
        { title: '会员账号：', data: '11' },
        { title: '会员号：', data: '11' }
      ],
      modifyPwForm: {
        newPassword: '',
        newPasswordAgain: ''
      },
      modifyTpwForm: {
        newPassword: '',
        newPasswordAgain: ''
      },
      settleType: [
        { key: 1, display_name: '启用' },
        { key: 0, display_name: '禁用' }
      ]
    }
  },
  methods: {
    changeStatus(status) {
      console.log(status) //新状态的值
      this.form.enable = !status
      this.$confirm('此操作将改变会员账号状态, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$message({
            type: 'success',
            message: '修改成功!'
          })
          if (this.form.enable == true) {
            this.form.enable = false
          } else {
            this.form.enable = true
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消修改'
          })
        })
    },
    modifyPhone(type) {
      this.visible = true
      if (type == 2) {
        this.titleName = '重置登录密码'
        this.pwModify = true
        this.tradePwModify = false
      } else if (type == 3) {
        this.titleName = '重置交易密码'
        this.pwModify = false
        this.tradePwModify = true
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.form-wrap {
  margin-top: 15px;
  .el-form-item--small,
  .el-form-item {
    .el-select,
    .el-input {
      width: 250px !important;
      margin-right: 10px;
    }
  }
}
.overtable-btns.spe-btn {
  margin-top: 15px;
}
.form-dialog {
  margin-top: 0;
}
</style>
